<template>
    <div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
        >
            <el-sub-menu :index="(index+1).toString()" v-for="(item,index) in list" :key="index">
            <template #title>
                <el-icon v-if="index==0"><Sugar /></el-icon>
                <el-icon v-else-if="index==1"><MilkTea /></el-icon>
                <el-icon v-else-if="index==2"><Dessert /></el-icon>
                <el-icon v-else-if="index==3"><ColdDrink /></el-icon>
                <el-icon v-else><CoffeeCup /></el-icon>
                <span>{{item.catagory}}</span>
            </template>
            <el-menu-item :index="((index+1)+'-'+(i+1)).toString()" v-for="(list,i) in item.list" :key="i" @click="send(list.cid)">{{ list.name }}</el-menu-item>
            </el-sub-menu>
          
        </el-menu>
    </div>
</template>

<script>
import { Sugar,MilkTea,Dessert,ColdDrink,CoffeeCup } from '@element-plus/icons-vue';
import axios from 'axios';
export default {
    methods: {
        send(val){
            this.$emit('handle',val)
        }
    },
    components:{
        Sugar,
        MilkTea,
        Dessert,
        ColdDrink,
        CoffeeCup
    },
    mounted(){
        axios.get("/navlist.json").then(res=>{
          
            this.list=res.data.navlist

        })
    },
    data() {
        return {
            list:[]
        }
    },
}
</script>